import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { countActions } from '../models/count';

export default function ChildCount() {
    console.log('re-render ChildCount');

    const dispatch = useDispatch();
    const count = useSelector((state: any) => {
        console.log(state, 'state');
        return state.count.count;
    });

    return (
        <main className='container p-4 border'>
            <div className='p-4'>count is: {count}</div>
            <button
                className='p-2 border'
                type='button'
                onClick={() => {
                    dispatch(countActions.addCountAsync(2));
                    // dispatch({
                    //     type: 'count/addCountAsync',
                    //     payload: 2,
                    // });
                }}
            >
                AddCount
            </button>
        </main>
    );
}
